<template>
    <!--<div>
      房屋加固优先级区划图
    </div>-->
  <div style="position: relative;height: 100%;">
    <!--地图模块-->
    <Index v-if="showBool" :dataType="dataType" :sqlFilter="formSqlFilter" :queryParams="queryParams"></Index>
    <!--区划查询-->
    <div style="position:absolute;top:20px;right:20px;padding:20px;width: 240px;height: 205px;background: #FFFFFF;">
      <el-row>
        <el-col>
          <el-select v-model="queryParams.province" placeholder="所在省" @change="chooseProvince" clearable value-key="id"
                     style="width:200px;">
            <el-option key="全国级" label="全国" value="全国级"></el-option>
            <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col style="margin:10px 0px;">
          <el-select v-model="queryParams.city" placeholder="所在市" @change="chooseCity"
                     style="width:200px;" value-key="id" clearable :disabled="queryParams.province=='全国级'">
            <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <el-select v-model="queryParams.county" placeholder="所在区/县" @change="chooseCounty" style="width:200px;"
                     value-key="id" clearable :disabled="queryParams.province=='全国级'">
            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <p style="padding: 0;text-align: center;">
        <el-button type="primary" @click="submitQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </p>
    </div>
  </div>
</template>
  
<script setup name="houseReinforcementPriority">
  //地图
  import Index from '@/map/thematicMap/divisionClass/houseReinforcementPriority/index.vue';
  import { getProvince, getChildArea } from "@/api/system/division";

  //类型
  const dataType = ref("fwjgyxjd");//房屋加固优先级点
  const form = ref({});
  const showBool = ref(false);
  const provinceData=ref([]);
  const cityData=ref([]);
  const areaData=ref([]);

  const data = reactive({
    queryParams: {
      province:null,//省名称
      city:null,//市名称
      county:null,//县名称
    },
    formSqlFilter: null,//查询图层过滤条件
  })
  const { queryParams,formSqlFilter } = toRefs(data);

  //区划查询超图图层
  function submitQuery(){
    let sqlFilter = "";
    let province = queryParams.value.province;
    let city = queryParams.value.city;
    let county = queryParams.value.county;
    if(province){
      if(city){
        if(county){
          sqlFilter = "province='"+province+"' and city='"+city+"' and area='"+county+"'";
        }else{
          sqlFilter = "province='"+province+"' and city='"+city+"'";
        }
      }else{
        if(province=="全国级"){
          sqlFilter = "全部";
        }else{
          sqlFilter = "province='"+province+"'";
        }
      }
    }else{
      sqlFilter = "全部";
    }
    formSqlFilter.value = sqlFilter;
  }

  function resetQuery(){
    queryParams.value={
      province:null,//省名称
      city:null,//市名称
      county:null,//县名称
    };
  }

  /** 获取省列表 */
  function getProvinceData() {
    getProvince().then((response) => {
      provinceData.value = response.data;
    });
  }
  function chooseProvince(value) {
    console.log(value);
    queryParams.value.city = null;
    queryParams.value.county = null;
    queryParams.value.province = value=='全国级'?value:value.name;
    cityData.value = [];
    areaData.value = [];
    if(value=='全国级'){
      return;
    }
    getChildArea(value.id).then(response => {
      cityData.value = response.data;
    });
  }
  function chooseCity(value) {
    queryParams.value.city = value.name;
    queryParams.value.county = null;
    areaData.value = [];
    getChildArea(value.id).then((response) => {
      areaData.value = response.data;
    });
  }
  function chooseCounty(value) {
    queryParams.value.county = value.name;
  }

  onMounted(() => {
    showBool.value = true;
    getProvinceData();
    submitQuery();
  })
</script>

<style scoped lang="scss">

</style>
  
  